<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>登陆</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Le styles -->
	<script type="text/javascript"
			src="${pageContext.request.contextPath}/resources/assets2/js/jquery.min.js"></script>

	<!--  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/assets2/css/style.css"> -->
	<link rel="stylesheet"
		  href="${pageContext.request.contextPath}/resources/assets2/css/loader-style.css">
	<link rel="stylesheet"
		  href="${pageContext.request.contextPath}/resources/assets2/css/bootstrap.css">
	<link rel="stylesheet"
		  href="${pageContext.request.contextPath}/resources/assets2/css/signin.css">

	<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<!-- Fav and touch icons -->
	<link rel="shortcut icon"
		  href="${pageContext.request.contextPath}/resources/assets2/ico/minus.png">
</head>
<style>
	/* 基础样式 */
	html, body {
		height: 100%;
		width: 100%;
		margin: 0;
		font-family: 'Arial', sans-serif;
	}

	body {
		background-image: url('1.jpg');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		position: relative;
	}

	/* 登录框 */
	#login-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 400px;
		padding: 40px;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		text-align: center;
	}

	#login-wrapper h1 {
		font-size: 24px;
		color: #2d6cf0;
		margin-bottom: 20px;
		font-weight: bold;
	}

	/* 表单输入框 */
	.form-group {
		margin-bottom: 20px;
		width: 100%;
		text-align: left;
	}

	.form-group label {
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
		display: block;
	}

	.form-control-i {
		width: 100%;
		padding: 10px;
		font-size: 16px;
		border: 1px solid #ccc;
		border-radius: 6px;
		box-sizing: border-box;
		transition: border-color 0.3s ease;
	}

	.form-control-i:focus {
		border-color: #2d6cf0;
		outline: none;
	}

	/* 按钮样式 */
	.btn {
		width: 100%;
		padding: 12px;
		background-color: #2d6cf0;
		border: none;
		border-radius: 6px;
		font-size: 16px;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.btn:hover {
		background-color: #1a5bb8;
	}

	/* 角色选择 */
	.form-group-r {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.checkbox {
		margin: 10px 0;
	}

	.checkbox label {
		font-size: 14px;
		color: #555;
		margin-left: 8px;
	}

	.checkbox input {
		margin-right: 10px;
	}

	.checkbox.active label {
		color: #2d6cf0;
	}

	/* 修复页面加载时的间隙 */
	.form-group-l-r {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-bottom: 20px;
	}

	/* 输入框和按钮的细节优化 */
	.form-group input[type="text"],
	.form-group input[type="password"] {
		width: 100%;
		padding: 12px;
		font-size: 16px;
		border-radius: 6px;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	.form-group input[type="text"]:focus,
	.form-group input[type="password"]:focus {
		border-color: #2d6cf0;
	}

	/* 背景图片覆盖 */
	#login-wrapper:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: -1;
		border-radius: 12px;
	}

	/* 美化验证码显示 */
	#nums {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	#nums span {
		margin: 0 5px;
		font-weight: bold;
	}

	#loginForm .codes input {
		width: 100%;
		padding: 10px;
		font-size: 14px;
		border-radius: 6px;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	/* 适配移动端 */
	@media screen and (max-width: 768px) {
		#login-wrapper {
			width: 90%;
			padding: 30px;
		}

		#login-wrapper h1 {
			font-size: 20px;
		}

		.form-group input[type="text"],
		.form-group input[type="password"] {
			width: 100%;
			padding: 10px;
			font-size: 14px;
		}

		.btn {
			padding: 10px;
			font-size: 14px;
		}

		.form-group-l-r {
			margin-bottom: 0;
		}
	}
</style>
<style>
	/* 基础样式 */
	html, body {
		height: 100%;
		width: 100%;
		margin: 0;
		font-family: 'Arial', sans-serif;
	}

	body {
		background-image: url('back.jpg');
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		position: relative;
	}

	/* 登录框 */
	#login-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 400px;
		padding: 40px;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		text-align: center;
	}

	#login-wrapper h1 {
		font-size: 24px;
		color: #2d6cf0;
		margin-bottom: 20px;
		font-weight: bold;
	}

	/* 表单输入框 */
	.form-group {
		margin-bottom: 20px;
		width: 100%;
		text-align: left;
	}

	.form-group label {
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
		display: block;
	}

	.form-control-i {
		width: 100%;
		padding: 10px;
		font-size: 16px;
		border: 1px solid #ccc;
		border-radius: 6px;
		box-sizing: border-box;
		transition: border-color 0.3s ease;
	}

	.form-control-i:focus {
		border-color: #2d6cf0;
		outline: none;
	}

	/* 按钮样式 */
	.btn {
		width: 100%;
		padding: 12px;
		background-color: #2d6cf0;
		border: none;
		border-radius: 6px;
		font-size: 16px;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.btn:hover {
		background-color: #1a5bb8;
	}

	/* 角色选择 */
	.form-group-r {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.checkbox {
		margin: 10px 0;
	}

	.checkbox label {
		font-size: 14px;
		color: #555;
		margin-left: 8px;
	}

	.checkbox input {
		margin-right: 10px;
	}

	.checkbox.active label {
		color: #2d6cf0;
	}

	/* 修复页面加载时的间隙 */
	.form-group-l-r {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-bottom: 20px;
	}

	/* 输入框和按钮的细节优化 */
	.form-group input[type="text"],
	.form-group input[type="password"] {
		width: 100%;
		padding: 12px;
		font-size: 16px;
		border-radius: 6px;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	.form-group input[type="text"]:focus,
	.form-group input[type="password"]:focus {
		border-color: #2d6cf0;
	}

	/* 背景图片覆盖 */
	#login-wrapper:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.1);
		z-index: -1;
		border-radius: 12px;
	}


	#nums span {
		margin: 0 5px;
		font-weight: bold;
	}

	#loginForm .codes input {
		width: 100%;
		padding: 10px;
		font-size: 14px;
		border-radius: 6px;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}


	@media screen and (max-width: 768px) {
		#login-wrapper {
			width: 90%;
			padding: 30px;
		}

		#login-wrapper h1 {
			font-size: 20px;
		}

		.form-group input[type="text"],
		.form-group input[type="password"] {
			width: 100%;
			padding: 10px;
			font-size: 14px;
		}

		.btn {
			padding: 10px;
			font-size: 14px;
		}

		.form-group-l-r {
			margin-bottom: 0;
		}
	}
</style>
<body>
<!-- Preloader -->
<!-- <div id="preloader">
    <div id="status">&nbsp;</div>
</div> -->
<div class="container" style="position: relative;">

	<div class="" id="login-wrapper">
		<h1>酒店客房预定管理系统</h1>
		<form id="loginForm" action="" method="post">
			<div class="form-group">
				<label class="label">用户名</label> <input type="text" id="username" name="username" placeholder="用户名"
														class="form-control-i" required>
			</div>
			<div class="form-group">
				<label class="label">密码</label> <input type="password" name="password" placeholder="密码"
													   class="form-control-i" required>
			</div>

			<div class="form-group">
				<label class="label">用户类型</label>
				<select id="userType" name="userType" class="form-control" required>
					<option value="admin">管理员</option>
					<option value="user">用户</option>
				</select>
			</div>
			<div class="form-group-l-r">
				<button class="btn btn btn-primary pull-right" type="submit" onclick="login()">登 录</button>
			</div>
		</form>

	</div>

</div>

<!--  END OF PAPER WRAP -->

<!-- MAIN EFFECT -->
<!--<script type="text/javascript" src="${pageContext.request.contextPath}/resources/assets2/js/preloader.js"></script>-->
<script type="text/javascript"
		src="${pageContext.request.contextPath}/resources/assets2/js/bootstrap.js"></script>
<!--<script type="text/javascript" src="${pageContext.request.contextPath}/resources/assets2/js/app.js"></script>-->
<!--<script type="text/javascript" src="${pageContext.request.contextPath}/resources/assets2/js/load.js"></script>-->
<!--<script type="text/javascript" src="${pageContext.request.contextPath}/resources/assets2/js/main.js"></script>-->
<script type="text/javascript"
		src="${pageContext.request.contextPath}/resources/js/jquery.form.js"></script>

<!--<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> -->
<!--<script type="text/javascript" src="${pageContext.request.contextPath}/resources/assets2/js/map/gmap3.js"></script> -->
<script type="text/javascript">

	<%@ include file="utils/menu.jsp"%>

	<%@ include file="utils/baseUrl.jsp"%>
	var role = "";
	var accountTableName = "";
	var userType = "admin"; // 默认用户类型为管理员
	var codes = [{
		num: 1,
		color: '#000',
		rotate: '10deg',
		size: '16px'
	}, {
		num: 2,
		color: '#000',
		rotate: '10deg',
		size: '16px'
	}, {
		num: 3,
		color: '#000',
		rotate: '10deg',
		size: '16px'
	}, {
		num: 4,
		color: '#000',
		rotate: '10deg',
		size: '16px'
	}]

	//渲染角色选择
	function setRoleOption() {
		var box = document.createElement('div');
		box.setAttribute('class', 'form-group-r');
		var menuNum = 0;
		for (var i = 0; i < menus.length; i++) {
			if(menus[i].hasBackLogin=='是') {
				if(menuNum==0) {
					role = menus[i].roleName;
					$('#loginForm').attr('action', baseUrl + menus[i].tableName + '/login');
					accountTableName = menus[i].tableName;
				}
				menuNum++;
			}
		}
		if(menuNum>1) {
			role = '';
			$('#loginForm').attr('action', '');
			accountTableName = '';
			for (var i = 0; i < menus.length; i++) {
				if(menus[i].hasBackLogin=='是') {
					//console.log(menu[i].roleName)
					var div = document.createElement('div');
					div.setAttribute('class', 'checkbox');
					var label = document.createElement('label');
					//label.innerHTML = menus[i].roleName;
					var checkbox = document.createElement('input');
					checkbox.setAttribute('type', 'radio');
					checkbox.setAttribute('name', 'chk');
					checkbox.setAttribute('value', menus[i].roleName);
					var attr = "checkRole(" + "\'" + menus[i].roleName + "\',\'"
							+ menus[i].tableName + "\')";
					checkbox.setAttribute('onclick', attr);
					//label.setAttribute('class','checkbox inline');
					label.innerHTML = menus[i].roleName;
					div.appendChild(checkbox);
					div.appendChild(label);
					box.appendChild(div);
				}
			}
		}
		$('form .form-group-l-r').before(box);
	}
	function checkRole(roleName, tableName) {
		role = roleName;
		$('#loginForm').attr('action', baseUrl + tableName + '/login');
		accountTableName = tableName;
	}

	$('#login-wrapper').on('change', 'input[type=radio]', function () {
		$('#login-wrapper .form-group-r .checkbox').removeClass('active');
		$(this).parent().addClass('active');
	});

	function login() {
		// 获取用户类型
		userType = $('#userType').val();

		var formData = {
			username: $('#username').val(),
			password: $('input[name="password"]').val(),
			userType: userType // 提交用户类型
		};

		// 根据选择的用户类型，决定登录接口
		if (userType === "admin") {
			accountTableName = "users"; // 管理员表
		} else if (userType === "user") {
			accountTableName = "yonghu"; // 用户表
		}

		$("#loginForm")
				.ajaxForm(
						function(res) {
							if (role == "" || role == null) {
								alert("请选择角色后再登录");
							} else {
								if (res.code == 0) {
									var username = $('#username').val();
									window.sessionStorage.setItem('accountTableName',accountTableName)
									window.sessionStorage.setItem('username',username);
									window.sessionStorage.setItem('token',
											res.token);
									window.sessionStorage.setItem('role',
											role);
									http(accountTableName+'/session','GET',{},(res2)=>{
										if(res2.code == 0){
											window.sessionStorage.setItem('userid',res2.data.id);
											window.location.href = "${pageContext.request.contextPath}/index.jsp";
										}
									});
								} else {
									alert(res.msg);
								}
							}

						});
	}
	function ready() {
		setRoleOption();
		//$('form').attr('action',baseUrl + 'users/login');
	}
	document.addEventListener("DOMContentLoaded", ready);

	function randomString() {
		var len = 4;
		var chars = [
			'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
			'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
			'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
			'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
			'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2',
			'3', '4', '5', '6', '7', '8', '9'
		]
		var colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
		var sizes = ['14', '15', '16', '17', '18']

		var output = []
		for (var i = 0; i < len; i++) {
			// 随机验证码
			var key = Math.floor(Math.random() * chars.length)
			codes[i].num = chars[key]
			// 随机验证码颜色
			var code = '#'
			for (var j = 0; j < 6; j++) {
				var key = Math.floor(Math.random() * colors.length)
				code += colors[key]
			}
			codes[i].color = code
			// 随机验证码方向
			var rotate = Math.floor(Math.random() * 30)
			var plus = Math.floor(Math.random() * 2)
			if (plus == 1) rotate = '-' + rotate
			codes[i].rotate = 'rotate(' + rotate + 'deg)'
			// 随机验证码字体大小
			var size = Math.floor(Math.random() * sizes.length)
			codes[i].size = sizes[size] + 'px'
		}

		var str = ''
		for(var i = 0;i<codes.length;i++) {
			str += '<span style="color:' + codes[i].color + ';transform:' + codes[i].rotate + ';fontSize:' + codes[i].size + ';padding: 0 3px;display:inline-block">'+codes[i].num+'</span>'
		}
		$('#nums').html('').append(str);
	}

	randomString();
</script>

</body>

</html>
